import React, { Component } from 'react';

// 引入当前组件的样式文件
import '../../assets/css/snapshot.css';

class Snapshot extends Component {
    state = {
        nameArr: ['娇娇老师', '吴胜老师', '美玉老师']
    }
    render() {
        return (
            <div>
                我是更新前获取快照的组件(获取更新前的dom信息)
                <button onClick={this.addTeacherFn}>添加数据</button>
                {/* 高阶函数的特点:形参都是函数 */}
                <ul id='ulbox'>
                    {this.state.nameArr.map((item, index) => <li key={index}>{item}</li>)}
                </ul>
            </div>
        );
    };
    addTeacherFn = () => {
        // [5,10]  Math.random()*(b-a+1)+a
        // [5,10)  Math.random()*(b-a)+a
        //console.log([1, 3].push(5));
        // 0 <= Math.random() < 1
        this.state.nameArr.push(Math.random() * 6 + 5)
        this.setState({
            nameArr: this.state.nameArr
        })
    }

    getSnapshotBeforeUpdate(props, state) {
        // 在render后componentDidUpdate 前触发
        // 特点: 01: 必须和 componentDidUpdate 一起结合使用,不能单独使用
        // 特点: 02: 必须有返回值,返回值一般为更新前的dom 快照, 最常见就是dom 更新前的dom 信息
        // 例如 :获取dom 高度, 该高度是dom 更新前的高度
        // console.log('getSnapshotBeforeUpdate');
        // console.log(document.querySelector('#ulbox').offsetHeight)
        return document.querySelector('#ulbox').offsetHeight
    };
    componentDidUpdate(props, state, snap) {
        // console.log('componentDidUpdate');
        console.log('snap', snap);
        // 设置当前ul 盒子的滚动条的高度永远显示最新的内容
        // console.log('scrollTop', document.querySelector('#ulbox').scrollTop);
        console.log('scrollHeight', document.querySelector('#ulbox').scrollHeight);
        document.querySelector('#ulbox').scrollTop = document.querySelector('#ulbox').scrollHeight - snap

    }
}

export default Snapshot;
